<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Messages</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .chat-box {
      width: 6.38rem;
    }

    .container {
      width: 6.38rem;
      /* height: 33.6rem; */
      background: #f6f8fa;
      border-radius: 0.16rem 0.16rem 0 0;
      padding: 0.56rem 0.32rem;
      margin: 0 auto;
    }

    h1 {
      /* font-size: 2rem;  */
    }

    p {
      /* font-size: 1rem;  */
    }

    .head {
      margin-bottom: 0.39rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .head img {
      width: 0.4rem;
      height: 0.4rem;
      background: #2a64f6;
      border-radius: 0.2rem;
      margin-right: 0.16rem;
    }

    .head .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.24rem;
      color: #192236;
      line-height: 0.16rem;
      text-align: justify;
      font-style: normal;
    }

    .content {
      width: 5.74rem;
      /* height: 28.92rem; */
      background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
      box-shadow: inset 0rem -0.02rem 0rem 0rem #f5f5f5;
      border-radius: 0.16rem;
      margin: 0 auto;
      /* padding: 0.4rem 0.24rem; */
      padding-top: .4rem;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
      /* margin-bottom: 0.32rem; */
    }

    .chat-content {
      flex: 1;
      overflow: hidden;
    }

    .chat-content>div {
      margin: 0 .24rem;
    }

    .bot {
      flex-shrink: 0;
      height: .4rem;
    }

    .more-than::after {
      content: '';
      position: absolute;
      bottom: .4rem;
      left: 0;
      width: 100%;
      height: 2rem;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #ffffff 100%);
      box-shadow: inset 0rpx -2rpx 0rpx 0rpx #f5f5f5;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      transform: translateY(3px);
    }

    .content-item {
      padding-bottom: 0.24rem;
      border-bottom: 1px solid #f5f5f5;

      &:not(:first-child) {
        padding-top: 0.24rem;
      }
    }

    .content-msg {

      p,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin-bottom: .16rem;
      }

      p:last-child {
        margin-bottom: 0;
      }

      ol {
        list-style: decimal;
        padding-left: .32rem;
      }

      ul {
        list-style: none;
      }

      pre,
      code {
        white-space: pre-line;
      }
    }

    .avatar {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.16rem;
    }

    .content-head {
      display: flex;
      align-items: center;
      margin-bottom: 0.14rem;
    }

    .username {
      font-weight: 400;
      font-size: 0.28rem;
      color: #9ca5b5;
      line-height: 0.28rem;
    }

    .content-msg {
      font-weight: 400;
      font-size: 0.24rem;
      color: #1d1f24;
      line-height: 0.44rem;
    }

    .foot {
      height: 3.01rem;
      /* background: linear-gradient(180deg, #2a64f6 0%, #2a64f6 100%);
        backdrop-filter: blur(0px); */
      /* background-image: url('/foot-bg.png'); */
      width: 6.38rem;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 0 0 0.16rem 0.16rem;
      padding-top: 0.34rem;
    }





    .code-box {
      width: 1.16rem;
      height: 1.16rem;
      background: #ffffff;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.43rem;
    }
    

    .code {
      width: 1.05rem;
      height: 1.05rem;
    }

    .text1 {
      font-weight: 600;
      font-size: 0.24rem;
      color: #ffffff;
      line-height: 0.44rem;
    }

    .text2 {
      font-weight: 300;
      font-size: 0.2rem;
      color: #ffffff;
      line-height: 0.44rem;
      letter-spacing: 0.2rem;
    }
    .letter {
      letter-spacing: normal;
    }


    .message-source {
      font-size: .26rem;
      line-height: .4rem;
      word-wrap: break-word;
    }

    .message-source .source-title {
      font-weight: 600;
      margin: .16rem 0 .08rem;
    }

    .message-source .source-item {
      margin-bottom: 8px;
      display: flex;
    }

    .message-source .source-item .item-value {
      color: #2a64f6;
      cursor: pointer;
    }
  </style>

  <script>
    // 动态设置 rem 基准值
    (function () {
      function setRem() {
        const baseWidth = 750; // 基准宽度
        const baseSize = 100;
        const screenWidth =
          document.documentElement.clientWidth || window.innerWidth;
        document.documentElement.style.fontSize =
          (screenWidth / baseWidth) * baseSize + "px";
      }

      setRem();
      window.onresize = setRem;
    })();
  </script>
</head>

<body>
  <div class="chat-box">
    <div class="container">
      <div class="head">
        <img src="<%= base64Obj['bpai.png']  %>" alt="" />
        <span class="title">BPai财税</span>
      </div>
      <div class="content" id="content" style="min-height:400PX;max-height: 500PX;">
        <div class="chat-content">
          <% messages.forEach(function(message) { %>
            <% if (message.direction=='Q' ) { %>
              <div class="content-item">
                <div class="content-head">
                  <img src="<%= base64Obj['zx-question.png']  %>" class="avatar q-img" src="" alt="" />
                  <span class="username">
                    <%= query.mobile %>
                  </span>
                </div>
                <div class="content-msg"><%- marked(message.message) %></div>
              </div>
              <% } else { %>
                <div class="content-item">
                  <div class="content-head">
                    <img src="<%= base64Obj['zx-answer.png']  %>" class="avatar a-img" src="" alt="" />
                    <span class="username">BPai</span>
                  </div>
                  <div class="content-msg">
                    <!-- 放置markdown转换后的html -->
                    <%- marked(message.message) %>
                      <!-- 用户主动停止需要后面拼接  -->
                      <% if (message.extField && JSON.parse(message.extField).stopSend=='1' ) { %>
                        <span style="
                      font-size: 12px;
                      display: inline-block;
                      color: #c0c0c0;
                      background: #f3f4f8;
                      border-radius: 22px;
                      line-height: 18px;
                      padding: 0 8px;
                      margin-left: 6px;
                    ">用户已停止</span>
                        <% } %>
                  </div>
                  <!-- 如果有参考来源显示 -->

                  <% if (message && message.source && message.source.length) { %>
                    <div class="message-source">
                      <div class="source-title">参考来源：</div>

                      <% message.source.forEach(function(item,index) { %>
                        <div class="source-item">
                          <div class="item-index">
                            <%= index + 1 %>、
                          </div>
                          <div class="item-value van-multi-ellipsis--l3">
                            <%= item.title %>
                          </div>
                        </div>
                        <% }); %>
                    </div>
                    <% } %>
                </div>
                <% } %>
                  <% }); %>
        </div>
        <div class="bot"></div>
      </div>
    </div>
    <div class="foot" style="background-image: url('<%= base64Obj["foot-bg.png"] %>');background-size: cover;
      background-position: center;">
      <!-- <img class="foot-bg" src="" alt="" /> -->
      <div class="code-box">
        <!-- 放置对应分享内容列表的页面二维码 -->
        <img class="code" src="<%= codeImg  %>" alt="" />
      </div>
      <div class="text1">扫描二维码 · 问一问 BPai</div>
      <div class="text2">财税问题问<span class="letter">BPai</span></div>
    </div>
  </div>
  <!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
  <script>
    function setRemUnit() {
      const baseWidth = 750; // 基准宽度
      const html = document.documentElement;
      const clientWidth = html.clientWidth;

      // 设置 html 元素的 font-size
      html.style.fontSize = `${(clientWidth / baseWidth) * 100}px`;
    }

    // 初次加载时设置
    setRemUnit();

    // 监听窗口尺寸变化
    window.addEventListener("resize", setRemUnit);
  </script>
</body>

</html>